<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>浮动塌陷|浮动卡住</title>
        <style>
            #father{
                width:500px;
                /* 父元素没高 */
                border:10px solid red;
                over flow:hidden;
                height:200px;
                /* 浮动卡住:1.父元素宽度不够 2.某个子元素的高超过其他子元素 */
            }
            /* 群组选择器 */
            .d1,.d2,.d3,.d4,.d5{
                width:100px;
                height:100px;
                font-size: 5em;
                text-align:center;
                line-height:100px;
                float:left;
                
                /* 浮动： 左浮动,脱离文档流 */
                /* 浮动问题：出现原因：父元素没高，子元素浮动
                  解决方法：          经验型：找到父元素加高
                                 【推荐版本】：找到父元素 加overflow：hidden
                 */
                /* 浮动卡住:1.父元素宽度不够 2.某个子元素的高超过其他子元素 
                方法:    经验:找到父元素加宽  
                   [推荐]:找到卡住元素,清除浮动
                
                */
            }
            .d1{
                background-color: #ffaaff;
                height:100px;
            }
            .d2{
                background-color: #aaffff;
            }
            .d3{
                background-color: #ffaa7f;
            }
            .d4{
                background-color: #76cac3;
            }
            .d5{
                background-color: #ff588a;
                /* 清除浮动 */
                clear:left;
            }
        </style>
    </head>
    <body>
        <!--浮动塌陷： 1.父元素 2.子元素  -->
        <div id="father">
            <div class="d1">1</div>
            <div class="d2">2</div>
            <div class="d3">3</div>
            <div class="d4">4</div>
            <div class="d5">5</div>
        </div>
    </body>
</html>